<template>
	<div class="clearfloat padding-across-10" style="height:100%;margin-bottom: 100px">
		<headerOpreate style="margin-bottom: 5px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		<el-row :gutter="2">
			<!-- 绑定区域修改 -->
			<el-col :span="8">
				<div class="bg-purple">
					<div style="margin-top: 3px;padding-bottom: 45px" class="panel-content">
						<div style="width: 100%;margin-top: 10px;padding-left: 5px">
							<span style="font-weight: bold">区域分配</span>
							<el-button style="margin-right: 5px;float: right" size="small" type="primary" @click="bindDistrict"><i class="el-icon-eleg-icon_drive el-icon--left"></i>保 存</el-button>
						</div>
						<el-tree :show-overflow-tooltip="true" style="margin-left: 25px;border: 0;" ref="tree" :data="allDistrictsDatas" show-checkbox :props="defaultProps" :default-expand-all="true" node-key="DistrictKeyId" :default-checked-keys="defaultCheckedKeys" :expand-on-click-node="true">
						</el-tree>
					</div>
				</div>
			</el-col>
			<el-col :span="16">
				<!-- 基本信息部分 -->
				<el-col :span="24">
					<div class="bg-purple">
						<div class="panel-content" style="margin-top: 3px;">
							<div style="width: 100%;margin-top: 10px;padding-left: 5px">
								<span style="font-weight: bold">基本信息修改</span>
								<el-button style="margin-right: 5px;float: right" type="primary" size="small" @click="saveSubmit('editForm')"><i class="el-icon-eleg-icon_drive el-icon--left"></i>保 存</el-button>
							</div>
							<el-form style="margin-top: 10px;margin-left: 150px;" id="form" ref="editForm" :model="editForm" :rules="editRules" label-width="100px">
								<el-form-item label="用户名" prop="uid">
									<el-input size="small" disabled v-model="editForm.uid" style="max-width:160px"></el-input>
								</el-form-item>
								<el-form-item label="卡号" prop="card">
									<el-input size="small" v-model="editForm.card" style="max-width:160px"></el-input>
								</el-form-item>
								<el-form-item label="昵称" prop="nickname">
									<el-input size="small" v-model="editForm.nickname" required style="max-width:160px"></el-input>
								</el-form-item>
								<el-form-item label="权限" prop="role">
									<el-select size="small" style="width: 160px" v-model="editForm.role" placeholder="请选择" required>
										<el-option v-for="item in roleDatas" :key="item.KeyId" :label="item.Name" :value="item.KeyId">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="优先级" prop="priority" required>
									<el-radio-group v-model="editForm.priority">
										<el-radio :label="3">低</el-radio>
										<el-radio :label="2">中</el-radio>
										<el-radio :label="1">高</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</el-col>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import $ from 'jquery';
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	import { Animation } from '../../../../assets/js/common.js'

	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				roleDatas: [],
				allDistrictsDatas: [],
				defaultCheckedKeys: [],
				roleDatas: [],
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: '刷新',
					action: 'reloadDatas'
				}],
				editForm: {
					card: '',
					nickname: '',
					uid: '',
					role: 0,
					priority: 3
				},
				editRules: {
					nickname: [{
						required: true,
						message: "昵称不能为空",
						trigger: 'blur'
					}]
				},
				defaultProps: {
					children: 'Children',
					label: 'Name',
					id: 'Id'
				},
			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			//保存修改
			saveSubmit(formName) {
				//				console.log(this.editForm)
				this.$refs[formName].validate((valid) => {
					if(valid) {
						HttpServer.httpPost.call(this, '/Api/User/Change/Info/ByAdmin', {
							keyid: this.templateObj.keyid,
							nickname: this.editForm.nickname,
							roleid: this.editForm.role,
							priority: this.editForm.priority,
							card: this.editForm.card
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$emit('changeView', 'List', this.templateObj);
								this.$notify({
									title: '成功',
									message: this.$t('message.saveSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
						})
					} else {
						return false;
					}
				});
			},
			//绑定区域
			bindDistrict() {
				this.$confirm('此操作将对此用户绑定区域，是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var bindInfo = [];
					if(this.$refs.tree.getCheckedKeys().length === 0) {
						bindInfo = [{
							userId: this.templateObj.keyid
						}]
					} else {
						for(var i = 0; i < this.$refs.tree.getCheckedKeys().length; i++) {
							bindInfo[i] = {};
							bindInfo[i].userId = this.templateObj.keyid;
							bindInfo[i].districtId = this.$refs.tree.getCheckedKeys()[i];
						}
					}
					HttpServer.httpPost.call(this, '/Api/District/Bind', {
						info: bindInfo
					}, function(response) {}, function(response) {
						// console.log('绑定区域返回结果',response);
						if(response.data.code === 0) {
							this.getDatas();
							this.$notify({
								title: '成功',
								message: this.$t('message.saveSuccess'),
								type: 'success',
								duration: 2500
							});
						} else {
							this.$notify.error({
								title: '错误',
								message: response.data.msg,
								duration: 2500
							});
						}
					});
				}).catch(() => {
					this.$notify.info({
						title: '消息',
						message: this.$t('message.cancleOperation'),
						duration: 2500
					})
				});
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			//处理树状图数据，由于父级选中时，子项会默认选中，所以需要从返回值中去掉包含子项的id,避免未选中的子项因父级id的存在而被选中
			traverseTree(arr1,arr2){
				//arr1为默认选中的数,arr2为区域信息数组
				for (var m = 0 ; m < arr1.length; m ++){
					for(var n = 0 ; n < arr2.length; n ++){
						if(arr1[m] == arr2[n].DistrictKeyId && arr2[n].Children.length > 0){
							arr1.splice(m,1);
							this.traverseTree(arr1,arr2[n].Children);
						}
					}
				}	
			},
			sortDatas(arr) {
				for(var i=0;i<arr.length;i++){
					for(var j = i + 1;j<arr.length;j++){
						if(arr[i].DistrictKeyId>arr[j].DistrictKeyId){
							var tmp = arr[i];
							arr[i] = arr[j];
							arr[j] = tmp;
						}
					}
				}
				return arr;
			},
			//查询所有区域
			getAllDistrictDatas() {
				HttpServer.httpPost.call(this, '/Api/District/info', {
					keyids: []
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.allDistrictsDatas = this.sortDatas(response.data.info);
						// console.log('this.allDistrictsDatas',this.allDistrictsDatas)
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
				});
			},
			//查询用户绑定的区域
			getDatas() {
				HttpServer.httpGet.call(this, '/Api/District/districtTree?uid=' + this.templateObj.keyid, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.traverseTree(response.data.childids,response.data.info);
						this.defaultCheckedKeys = response.data.childids;
						this.getAllDistrictDatas();
						if(this.isReload){
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				});
			},
			getUserRoles() {
				HttpServer.httpPost.call(this, '/Api/Role/List', {
					ids: "",
					size: 0,
					page: 0,
					filter: '',
					UserId: parseInt(GloabFun.getKeyId())
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.roleDatas = response.data.data;
					}
				});
			}
		},
		created() {
			this.getDatas();
			this.getUserRoles();
			this.editForm.uid = this.templateObj.uid;
			this.editForm.nickname = this.templateObj.nickname;
			this.editForm.role = this.templateObj.roleid;
			this.editForm.card = this.templateObj.card;
			if(this.templateObj.priority != 0) {
				this.editForm.priority = this.templateObj.priority;
			}
		}
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
	
	.inner-section {
		// margin: 5px 5px;
		// height: 100%;
		// border: 1px solid #BEBEBE;
		.flash-object {
			// margin: 5px 0;
			height: 368px;
			// height: e("calc(100% - 40px)");
			position: relative;
		}
		.opreat-button {
			//text-align: center;
		}
	}
	
	.el-row {
		margin-bottom: 5px;
		.bg-purple {
			width: 100%;
			// background: #EAF4FF;
			.detail-title {
				text-align: center;
			}
			.middle-section {
				width: 100%;
				display: flex;
				.middle-bg {}
			}
			.icon-default {
				color: #999999;
			}
			.panel-title {
				padding: 0;
				width: 100%;
				height: 30px;
				// color: white;
				// background-color: #E0E0E0;
				border-bottom: 1px solid #B0B0B0;
				line-height: 30px;
				font-weight: bold;
				// border-radius: 5px;
			}
			.panel-content {
				// box-shadow: 1px 1px 1px #888888;
				border: 1px solid #B0B0B0;
				border-radius: 3px;
				max-height: 600px;
				overflow-y: auto;
			}
			.detail-section {
				width: 100%;
				height: 80px;
				display: flex;
				justify-content: space-around;
				.section-left {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					width: 30%;
					height: 100%;
					// padding: 5px;
				}
				.section-right {
					// text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					// align-items: center;
					width: 70%;
					padding: 3px;
					height: 100%;
				}
			}
			.detail-section-3 {
				height: 100px;
				width: 100%;
				display: flex;
				justify-content: space-around;
				>div {
					display: flex;
					align-items: center;
					justify-content: space-around;
					flex-direction: column;
					width: 33%;
					height: 100%;
					.icon {
						height: 44px;
						line-height: 55px;
						i {
							font-size: 43px;
						}
					}
				}
			}
			.detail-section-2 {
				height: 150px;
				width: 100%;
				>div:nth-of-type(1) {
					border-bottom: 1px solid #7f93aa;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
				>div {
					height: 50%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
			}
		}
	}
	
	.grid-content {
		border: 1px solid #7f93aa;
		height: 400px;
	}
	
	.grid-content1 {
		// box-shadow: 2px 2px 5px #888888;
		border: 1px solid #B0B0B0;
		border-radius: 3px;
		margin-top: 1px;
		height: 100%;
	}
	
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>